﻿@{
    ViewData["Title"] = "Home Page";
}
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/iconfont.css">
<link href="~/css/index.css" rel="stylesheet" />
    
<script src="~/js/vue.js"></script>
<script src="~/js/ele_index.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<style>
  .el-table .warning-row {
      background:#ff0000;
      background:rgba(255,0,0,0.3);
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
<div id="app" class="text-center">
    <el-table v-loading="loading"
              :data="tableData"
              style="width: 100%"
              :row-class-name="tableRowClassName">
        <el-table-column prop="Image"
                         label="镜像名"
                         width="180">
        </el-table-column>
        <el-table-column prop="Status"
                         label="状态"
                         width="180">
        </el-table-column>
        <el-table-column prop="Id"
                         label="实例ID">
        </el-table-column>
        <el-table-column label="映射端口"
                         width="220">
            <template slot-scope="scope">
                <div v-for="itme in scope.row.Ports">
                    <el-tag>{{itme.IP}}</el-tag>
                    <el-tag type="danger">{{itme.PublicPort}}</el-tag>
                    <el-tag type="warning">{{itme.PrivatePort}}</el-tag>
                    <el-tag type="success">{{itme.Type}}</el-tag>
                </div>
            </template>
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         width="100">
            <template slot-scope="scope">
                @*<el-button type="text" size="small" v-if="scope.row.State=='running'">暂停</el-button>
                    <el-button type="text" size="small" v-else>启动</el-button>*@
                <el-button @@click="handleClick(scope.row)" type="text" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- Form -->
    <el-button type="success" @@click="dialogFormVisible = true">添加容器</el-button>

    <el-dialog title="run一个容器实例" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="设置参数" :label-width="formLabelWidth" prop="name">
                <el-select v-model="form.region" placeholder="请选择镜像" style="width: 70%;">
                    <el-option v-for="imet in images" :label="imet.RepoTags[0]" :value="imet.RepoTags[0]" ></el-option>
                </el-select>
                <el-input placeholder="输入映射外部端口" v-model.number="form.port" style="width: 20%;">
                    <template slot="prepend">port</template>
                </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @@click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @@click="run_docker()">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    var ip = "http://192.168.1.12:4243";
    //获取所有的docker容器list
    function huoqu_docker_list(ip) {
        window.$.ajax({
            type: 'post',
            url: '/homeAPI/index1',
            data: {
                ip:ip
            },
            success: function (data) {
                console.log("获取数据成功了");
                console.log(data);
                vm.tableData = JSON.parse(data);
            },
            error: function (jqXhr) {
                console.log("发生错误：" + jqXhr.status);
            }
        });
    }
    //删除一个docker实例
    function shanchu_docker_shili(ip,id) {
        window.$.ajax({
            type: 'post',
            url: '/homeAPI/index2',
            data: {
                ip:ip,
                id:id
            },
            success:(data)=>{
                console.log("获取数据成功了");
                console.log(data);
                vm.loading = false;
                huoqu_docker_list(ip);
            },
            error: function (jqXhr) {
                console.log("发生错误：" + jqXhr.status);
            }
        });
    }
    //获取docker镜像image组list
    function huoqu_docker_images(ip) {
        window.$.ajax({
            type: 'post',
            url: '/homeAPI/index3',
            data: {
                ip: ip
            },
            success: (data) => {
                console.log("获取数据成功了");
                console.log(data);
                vm.images = JSON.parse(data);
            },
            error: function (jqXhr) {
                console.log("发生错误：" + jqXhr.status);
            }
        });
    }
    //打算创建docker实例
    function chuangjian_docker_shili(ip, image,port) {
        window.$.ajax({
            type: 'post',
            url: '/homeAPI/index4',
            data: {
                ip: ip,
                image: image,
                port:port
            },
            success: (data) => {
                console.log("获取数据成功了");
                console.log(data);
                vm.loading = false;
                huoqu_docker_list(ip);
            },
            error: function (jqXhr) {
                console.log("发生错误：" + jqXhr.status);
            }
        });
    }
</script>
 <script>
     var vm = new Vue({
         el: "#app",
         data: {
             images:[],
             tableData: [],
             loading: false,
             dialogTableVisible: false,
             dialogFormVisible: false,
             form: {
                 region: '',
                 port:1000
             },
             formLabelWidth: '120px',
             rules: {
                 name: [
                     { required: true, message: '请选择镜像名称', trigger: 'blur' },
                     { min: 12, max: 200, message: '长度在 12 到 200 个字符', trigger: 'blur' }
                 ]}
         },
         methods: {
             submitForm: function () {
                 console.log(this.form.user);
                 console.log(this.form.pass);
             },
             tableRowClassName({ row, rowIndex }) {
                 if (row.Ports[0] != undefined) {
                     //console.log(row.Ports[0].PublicPort);
                     if (row.Ports[0].PublicPort>this.form.port) {
                         this.form.port = row.Ports[0].PublicPort + 1;
                     }
                 }
                 
                 
                 if (row.State === 'running') {
                     return 'success-row';
                 } else {
                     return 'warning-row';
                 }
                 return '';
             },
             handleClick(row) {
                 this.$confirm('此操作将永久删除该Docker实例, 是否继续?', '提示', {
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
                     type: 'warning'
                 }).then(() => {
                     this.loading = true;
                     console.log(row);
                     console.log("打算去删除数据");
                     var fanhui = shanchu_docker_shili(ip, row.Id);
                     this.$message({
                         type: 'success',
                         message: '删除成功!'
                     });
                 }).catch(() => {
                     this.$message({
                         type: 'info',
                         message: '已取消删除'
                     });          
                 });
             },
             run_docker() {
                 this.dialogFormVisible = false;
                 console.log(this.form.region);
                 console.log(this.form.port);
                 this.loading = true;
                 window.chuangjian_docker_shili(ip, this.form.region, this.form.port);
                 

             }
         },
         watch: {
             //stuList: function (val, newval) {
             //    console.log("list数据被改变了");
             //    this.$forceUpdate();
             //    console.log(val);
             //    console.log(newval);
             //}
         },
         created:function(){
             console.log("vue实例被创建了输出");
             window.huoqu_docker_list(ip);
             window.huoqu_docker_images(ip);
         }
     });
 </script>
